import { history } from '@@/core/history';
import { UserOutlined } from '@ant-design/icons';
import { message, Popover } from 'antd';
import Cookies from 'js-cookie';
import React, { useEffect, useState } from 'react';
import { useDispatch } from 'umi';

import AndonImg from '@/assets/images/Andon.svg';
import BaseDiv from '@/components/baseDiv';
import MsgPop from '@/components/msgPop';
import { namespace } from '@/models/global';
import CompanyInfo from '@/pages/PersonCenter/CompanyInfo';
import HistoryOrder from '@/pages/PersonCenter/HistoryOrder';
import InfoEditModal from '@/pages/PersonCenter/InfoModal';
import LeftContent from '@/pages/PersonCenter/LeftContent';
import MsgNotification from '@/pages/PersonCenter/MsgNotification';
import PurchasedProducts from '@/pages/PersonCenter/PurchasedProducts';
import UploadAvatar from '@/pages/PersonCenter/UploadAvatar';
import UserInfo from '@/pages/PersonCenter/UserInfo';

import styles from './index.less';

const boxStyles: React.CSSProperties = {
  width: '1400px',
  height: 'calc( 100% - 112px)',
  display: 'flex',
  justifyContent: 'space-evenly',
  alignItems: 'center',
};
const baseStyles: React.CSSProperties = {
  background: 'rgba(248, 249, 252, 1)',
  height: '100vh',
  opacity: 1,
  alignItems: 'baseline',
};
const boxStylesHeader: React.CSSProperties = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  height: 64,
  background: '#fff',
  width: '100%',
};
const USER_INFO = JSON.parse(localStorage.getItem('USER_INFO') as string);
export default function PersonCenter() {
  const [tabStatus, setTabStatus] = useState(1);

  const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
  const [infoOrPassword, setInfoOrPassword] = useState<'info' | 'password' | ''>('');
  const [infoModalVisible, setInfoModalVisible] = useState<boolean>(false);
  const [userInfo] = useState<any>(JSON.parse(localStorage.getItem('USER_INFO') as string));
  const dispatch = useDispatch();
  const editAvatar = () => {
    setIsModalVisible(true);
    message.info('头像编辑功能开发中暂不可用...');
  };

  const editInfo = () => {
    setInfoModalVisible(true);
    setInfoOrPassword('info');
  };

  const editPassword = () => {
    setInfoModalVisible(true);
    setInfoOrPassword('password');
  };
  useEffect(() => {
    if (!Cookies.get('saas_token')) {
      return history.push('Login');
    }
    if (window.location.href.indexOf('out_trade_no') > 0) {
      setTabStatus(3);
    }
    dispatch({
      type: `${namespace}/getUserInfo`,
      callback() {
      },
    });
  }, []);
  useEffect(() => {
    if (location.search.indexOf('status')) {
      const searchParams: any[] = location.search.split('?');
      searchParams.forEach((element: any) => {
        if (element) {
          const params: any[] = element.split('=');
          if (params[0] === 'status') {
            setTabStatus(parseInt(params[1]));
          }
        }
      });
    }
  }, [location.search]);

  const logout = () => {
    localStorage.clear();
    Cookies.remove('saas_token'); // removed!
    history.push('Login');
    setTimeout(() => {
      message.warn('已经退出登录 请重新登录！');
    }, 100);
  };
  return (
    <div>
      <BaseDiv boxStyles={boxStylesHeader}>
        <div onClick={() => history.push('/')} className={styles.leftBar}>
          <img src={AndonImg} className={styles.imgStyle}/>
          <div className={styles.sysBar}>
            <div style={{ fontSize: 24, marginBottom: -8, fontWeight: 700 }}>Andon</div>
            <div style={{ fontSize: 12 }}>异常快速反应系统</div>
          </div>
        </div>
        <div className={styles.rightBar}>
          <MsgPop/>
          <Popover
            content={
              <div className={styles.userContent}>
                <div
                  onClick={() => {
                    history.push('/PersonCenter');
                  }}
                >
                  个人中心
                </div>
                <div onClick={logout}>退出登录</div>
              </div>
            }
            title={() => (
              <div className={styles.user}>
                <div className={styles.iconStyle}>
                  <img src={USER_INFO?.avatar} alt=""/>
                </div>
                <span>{USER_INFO?.name}</span>
              </div>
            )}
          >
            <div className={styles.iconStyle}>
              <UserOutlined/>
            </div>
          </Popover>
        </div>
      </BaseDiv>
      <BaseDiv baseStyles={baseStyles} boxStyles={boxStyles}>
        {/*更改密码和修改信息*/}
        <InfoEditModal
          infoOrPassword={infoOrPassword}
          infoModalVisible={infoModalVisible}
          setInfoModalVisible={setInfoModalVisible}
        />
        {/*上传头像*/}
        <UploadAvatar isModalVisible={isModalVisible} setIsModalVisible={setIsModalVisible}/>
        {/*左侧Tab切换*/}
        <LeftContent tabStatus={tabStatus} setTabStatus={setTabStatus}/>
        {/*右侧部分*/}
        {tabStatus === 2 ? (
          <PurchasedProducts/>
        ) : tabStatus === 3 ? (
          <HistoryOrder/>
        ) : tabStatus === 4 ? (
          <MsgNotification/>
        ) : tabStatus === 5 ? (
          <CompanyInfo/>
        ) : (
          <UserInfo
            userInfo={userInfo}
            editInfo={editInfo}
            editAvatar={editAvatar}
            editPassword={editPassword}
          />
        )}
      </BaseDiv>
    </div>
  );
}
